<template>
  <div class="boxs">
    <div class="d-box">
      <img class="bar-img" :src="list.image" alt="" />
      <div class="data">
        <div class="title">{{ list.title }}</div>
        <div class="price">¥{{ list.price }}</div>
        <hr />
        <div>
          <div class="class-title">商品分类</div>
          <div class="class-imgs">
            <img style="border: 2px solid red" :src="list.image" alt="" />
          </div>
        </div>
        <hr />
        <div class="count">
          数量 库存 <span style="color: red">{{ list.num }}</span
          >件
        </div>
        <div class="calc">
          <div class="calc-1" @click="acc">-</div>
          <div class="calc-2">{{ count }}</div>
          <div class="calc-3" @click="add">+</div>
        </div>
        <hr />
        <div class="btns">
          <div class="btn-1" @click="shopping()">立即购买</div>
          <div class="btn-2" @click="addShopping()">加入购物车</div>
        </div>
      </div>
    </div>
    <div class="bot-imgs">
      <img style="border: 2px solid red" :src="list.image" alt="" />
    </div>
    <hr />
    <comment></comment>
  </div>
</template>
<script>
import Comment from '@/components/Comment.vue'
export default {
  name: 'FirstProjectDetail',
  data() {
    return {
      id: '',
      name: '',
      content: '',
      list: {},
      comList: [],
      count: 1,
      blogDetail: {},
      date: new Date()
    }
  },
  created() {
    this.getList()
  },
  methods: {
    add() {
      this.count++
    },
    acc() {
      if (this.count <= 1) return
      this.count--
    },
    //获取评论
    getCom() {},
    //确认评论
    issue() {},
    //时间转换
    timeEvent(time, is = false) {},
    //商品获取数据
    async getList() {
      console.log(this.$route.params.id)
      const { data: res } = await this.$http.post('detail', { id: this.$route.params.id })
      this.list = res.data[0]
      console.log(res.data[0])
    },
    // 确定购买
    shopping() {
      this.$router.push({ name: 'res' })
    },
    //加入购物车
    async addShopping() {
      console.log(this.$route.params.id)
      console.log(this.count)
      console.log(this.formatDateTime(this.date))
      const { data: res } = await this.$http.post('/add_car', { id: this.$route.params.id, times: this.formatDateTime(this.date), count: this.count })
      if (res.code !== 0) {
        return this.$message.error('添加失败')
      }
      this.$message.success('添加成功')
      this.$router.push({ name: 'shopCard' })
      console.log(res)
    },
    formatDateTime(value) {
      // 时间戳转换日期格式方法
      if (value == null) {
        return ''
      } else {
        const date = new Date(value)
        const y = date.getFullYear() // 年
        let MM = date.getMonth() + 1 // 月
        MM = MM < 10 ? '0' + MM : MM
        let d = date.getDate() // 日
        d = d < 10 ? '0' + d : d
        let h = date.getHours() // 时
        h = h < 10 ? '0' + h : h
        let m = date.getMinutes() // 分
        m = m < 10 ? '0' + m : m
        let s = date.getSeconds() // 秒
        s = s < 10 ? '0' + s : s
        return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
      }
    }
  },
  components: {
    Comment
  },
  mounted() {
    // console.log(this.formatDateTime(this.date))
  }
}
</script>
<style lang="scss" scoped>
.boxs {
  width: 1000px;
  margin: 50px auto;
  /* border: 2px solid red; */
}
.d-box {
  display: flex;
}
.bar-img {
  width: 400px;
  min-width: 400px;
  height: 500px;
  margin-right: 50px;
}
.data {
  flex-grow: 1;
}
.title {
  font-size: 30px;
}
.price {
  font-size: 18px;
  color: red;
  margin-top: 10px;
}
.class-imgs {
  display: flex;
  margin-top: 10px;
}
.class-imgs img {
  width: 50px;
  height: 50px;
  margin-right: 20px;
}
.calc {
  display: flex;
  align-content: center;
  margin-top: 10px;
  cursor: pointer;
}
.calc-2 {
  margin: 0 10px;
  padding-top: 2px;
}
.calc-1,
.calc-3 {
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-content: center;
  border: 1px solid #666;
}
.btn {
  display: flex;
}
.btns {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.btn-1,
.btn-2 {
  width: 150px;
  height: 40px;
  line-height: 40px;
  border-radius: 5px;
  text-align: center;
  background: rgb(243, 40, 40);
  color: #fff;
  cursor: pointer;
}
.btn-2 {
  background: #fff;
  color: #333;
  border: 2px solid #666;
}
.bot-imgs {
  display: flex;
  margin-top: 10px;
  margin-top: 20px;
}
.bot-imgs img {
  width: 80px;
  height: 80px;
  margin-right: 20px;
}
</style>
